{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '下拉插件:example/select/index', 'select2'])}

<style>
    [data-theme='dark'] .select2-container--default .select2-selection--single,
    [data-theme|='translucent'] .select2-container--default .select2-selection--single,
    [data-theme='dark'] .select2-container--default .select2-selection--multiple,
    [data-theme|='translucent'] .select2-container--default .select2-selection--multiple,
    [data-theme='dark'] .select2-container--classic .select2-search--dropdown .select2-search__field,
    [data-theme|='translucent'] .select2-container--classic .select2-search--dropdown .select2-search__field,
    [data-theme='dark'] .select2-container--default .select2-search--dropdown .select2-search__field,
    [data-theme|='translucent'] .select2-container--default .select2-search--dropdown .select2-search__field {
        background-color: transparent;
        border-color: rgba(var(--bs-white-rgb), .5);
    }
    [data-theme='dark'] .select2-container--default .select2-selection--single .select2-selection__rendered,
    [data-theme|='translucent'] .select2-container--default .select2-selection--single .select2-selection__rendered,
    [data-theme='dark'] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
    [data-theme|='translucent'] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
    [data-theme='dark'] .select2-container--classic .select2-search--dropdown .select2-search__field,
    [data-theme|='translucent'] .select2-container--classic .select2-search--dropdown .select2-search__field,
    [data-theme='dark'] .select2-container--default .select2-search--dropdown .select2-search__field,
    [data-theme|='translucent'] .select2-container--default .select2-search--dropdown .select2-search__field {
        color: rgba(var(--bs-white-rgb), .5);
    }
    [data-theme='dark'] .select2-container--default .select2-selection--single .select2-selection__arrow b,
    [data-theme|='translucent'] .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: rgba(var(--bs-white-rgb), .5) transparent transparent transparent;
    }
    [data-theme='dark'] .select2-container--default .select2-selection--multiple .select2-selection__choice,
    [data-theme|='translucent'] .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: rgba(var(--bs-white-rgb), .3);
        border-color: rgba(var(--bs-white-rgb), .5);
    }
    [data-theme='dark'] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
    [data-theme|='translucent'] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: rgba(var(--bs-white-rgb), .8);
    }
    [data-theme='dark'] .select2-container--default.select2-container--disabled .select2-selection--single,
    [data-theme|='translucent'] .select2-container--default.select2-container--disabled .select2-selection--single {
        background-color: rgba(var(--bs-secondary-rgb), .2);
    }
    [data-theme='dark'] .select2-container--default .select2-results__option[aria-selected=true],
    [data-theme|='translucent'] .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: rgba(var(--bs-white-rgb), .2);
    }
    
    [data-theme='dark'] .select2-dropdown {
        background-color: #292F39;
        border: none;
        -webkit-box-shadow: 0 0 5px rgba(var(--bs-black-rgb), 0.75);
        -moz-box-shadow: 0px 0px 5px rgba(var(--bs-black-rgb), 0.75);
        box-shadow: 0 0 5px rgba(var(--bs-black-rgb), 0.75);
    }
    [data-theme|='translucent'] .select2-dropdown {
        background-color: rgba(var(--bs-white-rgb), .2);
        backdrop-filter: blur(10px);
        border: none;
        -webkit-box-shadow: 0 0 4px rgba(var(--bs-black-rgb), .175);
        -moz-box-shadow: 0 0 4px rgba(var(--bs-black-rgb), .175);
        box-shadow: 0 0 4px rgba(var(--bs-black-rgb), .175);
    }
    [data-theme='dark'] .select2-container--default.select2-container--open .select2-selection--single,
    [data-theme|='translucent'] .select2-container--default.select2-container--open .select2-selection--single,
    [data-theme='dark'] .select2-container--default.select2-container--focus .select2-selection--multiple,
    [data-theme|='translucent'] .select2-container--default.select2-container--focus .select2-selection--multiple,
    [data-theme='dark'] .select2-container--classic.select2-container--open .select2-selection--single,
    [data-theme|='translucent'] .select2-container--classic.select2-container--open .select2-selection--single {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-white-rgb), 0.075);
    }
    [data-theme='dark'] .select2-container--classic.select2-container--open .select2-selection--single,
    [data-theme|='translucent'] .select2-container--classic.select2-container--open .select2-selection--single {
        border-color: #ebebeb;
    }
    [data-theme|='translucent'] .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: rgba(var(--bs-white-rgb), .375);
    }
    </style>

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">下拉选择框 select2</div>
        </header>
        <div class="card-body">
        
        <p>v5已经集成了bootstrap-select，这里提供另一种选择。</p>
          <div class="row">
          <div class="col-md-6">
            <p>默认</p>
            <div class="mb-3">
              <label for="example-select" class="form-label">你是一名</label>
              <select class="form-control js_select2" name="example-1" id="example-select">
                <option value>请选择</option>
                <option value="1">平面设计</option>
                <option value="2">程序员</option>
                <option value="3">前端工程师</option>
                <option value="4">产品经理</option>
              </select>
            </div>
            <p>多选</p>
            <div class="mb-3">
              <label for="example-select3" class="form-label">你最擅长</label>
              <select class="form-control js_multi_select2" name="example-3" id="example-select3" multiple="multiple">
                <option value>请选择</option>
                <option value="1">潜水</option>
                <option value="2" selected>摸鱼</option>
                <option value="3">抬杠</option>
                <option value="4">放鸽子</option>
              </select>
            </div>
            <p>限制选择的数量</p>
            <div class="mb-3">
              <label for="example-select5" class="form-label">如果你落难到荒岛，你会选择</label>
              <select class="form-control js_multi_list_select2" name="example-5" id="example-select5" multiple="multiple">
                <option value="1">手电</option>
                <option value="2">小刀</option>
                <option value="3">急救包</option>
                <option value="4">打火机</option>
                <option value="5">一个美女</option>
              </select>
            </div>
            <p>禁用的选项</p>
            <div class="mb-3">
              <label for="example-select7" class="form-label">我有一辆</label>
              <select class="form-control js_disabled_option_select2" name="example-7" id="example-select7">
                <option value>请选择</option>
                <option value="1">自行车</option>
                <option value="2">三轮车</option>
                <option value="3" disabled>奥迪A6</option>
                <option value="4">玩具车</option>
              </select>
            </div>
            <p>禁用下拉选择</p>
            <div class="mb-3">
              <label for="example-select9" class="form-label">2019</label>
              <select class="form-control js_disabled_select2" name="example-9" id="example-select9">
                <option value="1">我太难了</option>
                <option value="2">琦耻大辱</option>
                <option value="3">我居然停住球了</option>
                <option value="4">上上签</option>
              </select>
            </div>
          </div>
          <div class="col-md-6">
            <p>使用主题</p>
            <div class="mb-3">
              <label for="example-select2" class="form-label">你是一名</label>
              <select class="form-control js_theme_select2" name="example-2" id="example-select2">
                <option value>请选择</option>
                <option value="1">平面设计</option>
                <option value="2">程序员</option>
                <option value="3">前端工程师</option>
                <option value="4">产品经理</option>
              </select>
            </div>
            <p>带提示占位字符</p>
            <div class="mb-3">
              <label for="example-select4" class="form-label">我想要...</label>
              <select class="form-control js_placeholder_select2" name="example-4" id="example-select4">
                <option></option><!--需要一个空的option作为第一个选项-->
                <option value="1">500万</option>
                <option value="2">一栋楼</option>
                <option value="3">美女</option>
                <option value="4">赚他一个亿</option>
                <option value="5">洗洗睡吧</option>
              </select>
            </div>
            <p>数组赋值</p>
            <div class="mb-3">
              <label for="example-select6" class="form-label">哈哈，我发现了...</label>
              <select class="form-control js_array_select2" name="example-6" id="example-select6"></select>
            </div>
            <p>隐藏搜索框</p>
            <div class="mb-3">
              <label for="example-select8" class="form-label">你用什么浏览器</label>
              <select class="form-control js_hide_search_select2" name="example-8" id="example-select8">
                <option value="1">谷歌</option>
                <option value="2">百度</option>
                <option value="3">360</option>
                <option value="4">火狐</option>
                <option value="5">IE</option>
                <option value="6">搜狗</option>
                <option value="7">Edge</option>
                <option value="8">Opera</option>
                <option value="9">猎豹</option>
                <option value="10">2345</option>
                <option value="11">UC</option>
                <option value="12">遨游</option>
                <option value="13">QQ</option>
                <option value="14">Safari</option>
                <option value="15">世界之窗</option>
                <option value="16">蚂蚁</option>
                <option value="17">小智</option>
                <option value="18">糖果</option>
                <option value="19">我太难了</option>
              </select>
            </div>
            <p>自定义模板</p>
            <div class="mb-3">
              <label for="example-select10" class="form-label">你知道哪个国家</label>
              <select class="form-control js_template_select2" name="example-10" id="example-select10"></select>
            </div>
          </div>
        </div>
        
        </div>
      </div>
  </div>

</div>

<select class="hide js-source-states">
    <optgroup label="Alaskan/Hawaiian Time Zone">
      <option value="AK">Alaska</option>
      <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
      <option value="CA">California</option>
      <option value="NV">Nevada</option>
      <option value="OR">Oregon</option>
      <option value="WA">Washington</option>
    </optgroup>
    <optgroup label="Mountain Time Zone">
      <option value="AZ">Arizona</option>
      <option value="CO">Colorado</option>
      <option value="ID">Idaho</option>
      <option value="MT">Montana</option>
      <option value="NE">Nebraska</option>
      <option value="NM">New Mexico</option>
      <option value="ND">North Dakota</option>
      <option value="UT">Utah</option>
      <option value="WY">Wyoming</option>
    </optgroup>
    <optgroup label="Central Time Zone">
      <option value="AL">Alabama</option>
      <option value="AR">Arkansas</option>
      <option value="IL">Illinois</option>
      <option value="IA">Iowa</option>
      <option value="KS">Kansas</option>
      <option value="KY">Kentucky</option>
      <option value="LA">Louisiana</option>
      <option value="MN">Minnesota</option>
      <option value="MS">Mississippi</option>
      <option value="MO">Missouri</option>
      <option value="OK">Oklahoma</option>
      <option value="SD">South Dakota</option>
      <option value="TX">Texas</option>
      <option value="TN">Tennessee</option>
      <option value="WI">Wisconsin</option>
    </optgroup>
    <optgroup label="Eastern Time Zone">
      <option value="CT">Connecticut</option>
      <option value="DE">Delaware</option>
      <option value="FL">Florida</option>
      <option value="GA">Georgia</option>
      <option value="IN">Indiana</option>
      <option value="ME">Maine</option>
      <option value="MD">Maryland</option>
      <option value="MA">Massachusetts</option>
      <option value="MI">Michigan</option>
      <option value="NH">New Hampshire</option>
      <option value="NJ">New Jersey</option>
      <option value="NY">New York</option>
      <option value="NC">North Carolina</option>
      <option value="OH">Ohio</option>
      <option value="PA">Pennsylvania</option>
      <option value="RI">Rhode Island</option>
      <option value="SC">South Carolina</option>
      <option value="VT">Vermont</option>
      <option value="VA">Virginia</option>
      <option value="WV">West Virginia</option>
    </optgroup>
  </select>

  <script type="text/javascript">
    $(document).ready(function() {
        // 默认
        $('.js_select2').select2();
        // 选用主题
        $('.js_theme_select2').select2({
            theme: "classic"
        });
        // 多选
        $(".js_multi_select2").select2();
        // 提示占位符
        $(".js_placeholder_select2").select2({
            placeholder: "我想要"
        });
        // 限制选择个数
        $(".js_multi_list_select2").select2({
            maximumSelectionLength: 2,
            language: "zh-CN"
        });
        // 数组赋值
        var data = [{
            id: 0,
            text: '没有BUG'
        },
        {
            id: 1,
            text: '一个BUG'
        },
        {
            id: 2,
            text: '两个BUG'
        },
        {
            id: 3,
            text: '三个BUG'
        },
        {
            id: 4,
            text: '好多BUG'
        }];
        $(".js_array_select2").select2({
            data: data
        });
        // 禁用的选项
        $(".js_disabled_option_select2").select2();
        // 隐藏搜索框
        $(".js_hide_search_select2").select2({
            minimumResultsForSearch: Infinity
        });
        // 禁用下拉选择
        $(".js_disabled_select2").select2({
            disabled: true
        });
        // 自定义模板
        var $states = $(".js-source-states");
        var statesOptions = $states.html();
        $states.remove();
        
        $(".js_template_select2").append(statesOptions);
        function formatState (state) {
            if (!state.id) {
                return state.text;
            }
            var baseUrl = "https://select2.org/user/pages/images/flags";
            var $state = $(
                '<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="temp-img-flag" /> ' + state.text + '</span>'
            );
            return $state;
        };
        
        $(".js_template_select2").select2({
          templateResult: formatState
        });
    });
    </script>